<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>视频管理</title>
    <div th:replace="fragment/header::css"></div>
    <div th:replace="fragment/header::js"></div>
</head>
<div th:replace="fragment/script::contextPath"></div>
<body > <!-- th:style="|background: url(@{/image/admin/adminBackground.png})|"-->
<div class="layui-layout layui-layout-admin site-demo-fixed" >
    <div th:replace="fragment/nav::nav"></div>
    <div class="container" style="width: auto">
        <nav class="navbar navbar-dark ">
            <div class="container-fluid justify-content-center" >
                <form class="form-inline" th:action="@{/admin/adminClassify}" method="get">
                    <input name="keyWord"  class="form-control mr-sm-2" style="width: 600px" type="search" placeholder="按类别名称搜索" aria-label="Search">
                    <button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button>
                </form>
                <button class="btn btn-outline-primary my-2 my-sm-0" type="submit" style="margin: 10px" th:onclick="addCategory()">添加</button>
            </div>
        </nav>
        <table class="table table-striped" >
            <thead>
            <tr>
                <th scope="col" style="text-align: center" width="150px">类别名称</th>
                <th scope="col" style="text-align: center" width="150px">分类</th>
                <th scope="col" style="text-align: center" width="150px">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr style="text-align: center" th:each="category:${categoryList}">
<!--                <span th:text="${category}"></span>-->
                <td th:text="${category.getCategoryName()}"></td>
                <td th:switch="${category.getCategoryType()}">
                    <span th:case="0">视频</span>
                    <span th:case="1">影视</span>
                </td>
                <td width="200px">
                    <button type="button" class="btn btn-outline-primary btn-sm"
                            th:onclick = "editCategoryInfo([[${category.getCategoryId()}]],[[${category.getCategoryName()}]],[[${category.getCategoryType()}]])" >编辑</button>
                    <button type="button" class="btn btn-outline-danger btn-sm" th:onclick = "delCategoryInfo([[${category.getCategoryId()}]])">删除</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<!-- Modal 编辑信息-->
<div class="modal fade" id="editCategory" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form th:action="@{/admin/adminEditCategory}" method="post">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">编辑用户信息</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="categoryId" id="categoryId">
                    <div class="form-group">
                        <label for="categoryName">类别名称</label>
                        <input type="text" class="form-control" id="categoryName" name="categoryName">
                    </div>
                    <div class="form-group">
                        <label for="categoryType">分类</label>
                        <select  class="form-control" id="categoryType" name="categoryType">
                            <option value="0">视频</option>
                            <option value="1">影视</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary" onclick="submit()">提交</button>
                </div>
            </form>
        </div>
    </div>
</div>

</body>
</html>

<script>
    function editCategoryInfo(categoryId,categoryName,categoryType) {
        $("#categoryId").val(categoryId);
        $("#categoryName").val(categoryName);
        $("#categoryType").val(categoryType);
        $("#editCategory").modal('show');
    }
    function addCategory() {
        $("#categoryId").val("");
        $("#categoryName").val("");
        $("#categoryType").val("");
        $("#editCategory").modal('show');
    }
    function delCategoryInfo(categoryId){
        $.ajax({
            type: "POST",
            url: contextPath+"/admin/adminDelCategory",
            data: {
                categoryId: categoryId
            },
            success: function (data) {
                if (data.code == 200) {
                    alert("删除成功");
                    window.location.reload();
                } else {
                    alert("删除失败");
                }
            }
        });
    }
    function submit() {
        let categoryId =$("#categoryId").val();
        console.log("categoryId",categoryId)
        if (categoryId === ""){
            $.ajax({
                type: "POST",
                url: contextPath+"/admin/adminAddCategory",
                data: {categoryName:$("#categoryName").val(),categoryType:$("#categoryType").val()},
                success: function (data) {
                    if (data.code == 200){
                        alert("添加成功");
                        window.location.reload();
                    }else {
                        alert(data.msg);
                    }
                }
            });
        }else {
            $.ajax({
                type: "POST",
                url: contextPath+"/admin/adminEditCategory",
                data: {categoryId,categoryName:$("#categoryName").val(),categoryType:$("#categoryType").val()},
                success: function (data) {
                    if (data.code == 200){
                        alert("修改成功");
                        window.location.reload();
                    }else {
                        alert(data.msg);
                    }
                }
            });
        }
    }
</script>